<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>栏目</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.8/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote layui-quote-nm" style="width: 860px;"><i class="layui-icon layui-icon-about"></i>提示：“父栏目ID”、“名称”、“排序” 三列，单击可编辑保存。</blockquote>

        <script type="text/html" id="toolbar">
            <div id="id_div_toolbar"></div>
        </script>

        <table class="layui-hide" id="id_menu" lay-size="lg" lay-filter="currentTableFilter"></table>

    </div>
</div>
<script src="/lib/layui-v2.6.8/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['table'], function () {
        var $ = layui.jquery,
            table = layui.table;

        $.get('/admin/user/getCurrent', {}, function (re) {
            if (re.code == 0) {
                layui.use('watermark', function (watermark) {
                    watermark({watermark_txt: re.data.name});
                });
            }
        }, 'json');

        layui.showList = function (parentId) {
            table.reload('id_menu', {where: {'parent_id': parentId}});
        };

        layui.delOne = function (id, parentId) {
            layer.confirm('真的删除么？关联子栏目将归属父栏目！', function (index) {
                $.post('/admin/menu/delete', {'id': id, 'parent_id': parentId}, function (re) {
                    if (re.code == 0) {
                        layui.showList(parentId);
                    } else {
                        layer.msg(re.msg);
                    }
                }, 'json');
                layer.close(index);
            });
        };

        table.render({
            elem: '#id_menu',
            url: '/admin/menu/list',
            where: {
                parent_id: '0',
                order: 'sort_number desc'
            },
            toolbar: '#toolbar',
            done: function () {
                $('body, html').animate({
                    scrollTop: 0
                }, 100);
            },
            cols: [[
                {field: 'id', title: '本栏目ID', width: 100},
                {field: 'parent_id', title: '<i class="layui-icon layui-icon-edit"></i>父栏目ID', width: 150, edit: 'text', templet: function (row) {
                    if (row.parents !== undefined) {
                        let re = '';
                        for (let i in row.parents) {
                            if (i > 0) {
                                re += '<i class="layui-icon layui-icon-right"></i>';
                            }
                            re += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="javascript:layui.showList(' + row.parents[i].id + ');">' + row.parents[i].name + ' # ' + row.parents[i].id + '</button>'
                        }
                        $('#id_div_toolbar').html(re);
                    }
                    return row.parent_id;
                }},
                {field: 'name', title: '<i class="layui-icon layui-icon-edit"></i>名称', edit: 'text'},
                {field: 'name_id', title: '<i class="layui-icon layui-icon-edit"></i>唯一标识', edit: 'text'},
                {field: 'sort_number', title: '<i class="layui-icon layui-icon-edit"></i>排序', edit: 'text', width: 100},
                {title: '子栏目', width: 95, templet: function (row) {
                    if (row.id == 0) {
                        return '';
                    }
                    return '<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" onclick="javascript:layui.showList(' + row.id + ');"><i class="layui-icon layui-icon-add-1"></i>子栏目</button>';
                }},
                {title: '删除', width: 90, templet: function (row) {
                    if (row.id == 0) {
                        return '';
                    }
                    return '<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="javascript:layui.delOne(' + row.id + ', ' + row.parent_id + ');"><i class="layui-icon layui-icon-delete"></i>删除</button>';
                }}
            ]],
            limits: [50, 100],
            limit: 50,
            page: true,
            skin: 'line',
            width: 900
        });

        //监听单元格编辑
        table.on('edit(currentTableFilter)', function(obj) {
            let field = obj.field;
            let id = obj.data.id;
            let newValue = obj.value.trim();
            if (newValue == '') {
                layer.msg('不能为空！');
                table.reload('id_menu');
                return false;
            }
            if ((field == 'sort_number' || field == 'parent_id')) {
                if (id == 0) {
                    layer.msg('修改对未创建的条目无效 !');
                    return false;
                }
                if (isNaN(newValue)) {
                    layer.msg('只能填写数字！');
                    table.reload('id_menu');
                    return false;
                }
            }
            let post = {'id': id};
            post[field] = newValue;
            if (id == 0) {
                post['parent_id'] = obj.data.parent_id;
            }
            let url = '/admin/menu/create';
            if (id > 0) {
                url = '/admin/menu/update';
            }
            $.post(url, post, function (re) {
                let parent_id = obj.data.parent_id;
                if (re.code != 0) {
                    layer.alert(re.msg);
                    parent_id = 0;
                }
                table.reload('id_menu', {where: {'parent_id': parent_id}});
            }, 'json');
        });
    });

</script>

</body>
</html>